<template>
  <nav class="axiom-pc-sidebar-nav" :class="{ 'is-collapsed': isCollapsed }">
    <div v-if="title && !isCollapsed" class="sidebar-title">{{ title }}</div>
    
    <!-- 使用一个无序列表来包裹所有菜单项 -->
    <ul class="nav-list">
      <!-- 递归渲染菜单项 -->
      <AxiomPCSidebarNavItem
        v-for="item in visibleMenuItems"
        :key="item.id"
        :item="item"
        :is-collapsed="isCollapsed"
        :is-active-func="isActive"
        :open-ids="openMenuIds"
        @toggle="toggleMenu"
        @navigate="navigateTo"
      />
    </ul>
  </nav>
</template>

<script>
import AxiomPCSidebarNavItem from './_AxiomPCSidebarNavItem.vue'

export default {
  name: 'AxiomPCSidebarNav',
  components: {
    AxiomPCSidebarNavItem,
  },
  props: {
    title: String,
    menuItems: {
      type: Array,
      required: true,
    },
    isCollapsed: Boolean,
  },
  data() {
    return {
      openMenuIds: new Set(),
    }
  },
  computed: {
    visibleMenuItems() {
      const filterHidden = (items) => {
        return items
          .filter(item => !item.meta?.hideInMenu)
          .map(item => {
            if (item.children && item.children.length > 0) {
              return { ...item, children: filterHidden(item.children) };
            }
            return item;
          });
      };
      return filterHidden(this.menuItems);
    }
  },
  watch: {
    '$route.path': {
      handler(newPath) {
        const findPath = (items, path) => {
          for (const item of items) {
            if (item.path === path) {
              return new Set()
            }
            if (item.children) {
              const result = findPath(item.children, path)
              if (result) {
                result.add(item.id)
                return result
              }
            }
          }
          return null
        }
        const activeParentIds = findPath(this.visibleMenuItems, newPath)
        if (activeParentIds) {
          this.openMenuIds = activeParentIds
        } else {
          this.openMenuIds = new Set()
        }
      },
      immediate: true,
    },
  },
  methods: {
    isActive(item) {
      return this.$route.path === item.path
    },
    toggleMenu(item) {
      if (this.isCollapsed) return

      const path = this.getPath(this.visibleMenuItems, item.id)
      if (!path) return

      const nextOpenMenuIds = new Set()

      if (this.openMenuIds.has(item.id)) {
        const parentPath = path.slice(0, -1)
        parentPath.forEach((p) => nextOpenMenuIds.add(p.id))
      } else {
        path.forEach((p) => nextOpenMenuIds.add(p.id))
      }

      this.openMenuIds = nextOpenMenuIds
    },
    navigateTo(path) {
      if (path) {
        this.$router.push(path)
      }
    },
    getPath(items, id, currentPath = []) {
      for (const item of items) {
        const newPath = [...currentPath, item]
        if (item.id === id) {
          return newPath
        }
        if (item.children) {
          const result = this.getPath(item.children, id, newPath)
          if (result) {
            return result
          }
        }
      }
      return null
    },
  },
}
</script> 